<template>
	<view class="login">
		<view class="login-a">
			<view class="phone">
				<image src="@/static/login/手机号.png" mode=""></image>
				<input type="text" v-model="user.phone" placeholder="请输入手机号" />
			</view>
			<view class="phone">
				<image src="@/static/login/验证码.png" mode=""></image>
				<input type="password" v-model="user.password" placeholder="请输入密码" />
			</view>
			<view class="button">
				<view class="switch" @click="modifyLoginState">{{ loginState2 }}</view>
				<van-button
					round
					size="large"
					:disabled="!user.phone.length && !user.password.length"
					@click="register"
					:color="!user.phone.length || !user.password.length ? '#F08F92' : '#ee0a24'"
				>
					{{ loginState }}
				</van-button>
			</view>
		</view>

		<view class="force" v-if="loginShow">
			<van-checkbox :value="checked" @change="checkRadio" icon-size="30rpx"></van-checkbox>
			<view>
				已阅读并同意
				<text>《天鹅到家同意协议》</text>
				和
				<text>《天鹅到家隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reqUserRegister, reqUserLogin } from '@/api/modules/login.js'
import { reactive, toRefs } from 'vue'
import { GetUserInfo } from '@/store/user.js'
const getUserInfo = GetUserInfo()

const state = reactive({
	user: {
		phone: '',
		password: ''
	},
	checked: true,
	loginState: '登录',
	loginState2: '注册',
	loginShow: true
})

// 注册
const register = async () => {
	const phone = state.user.phone
	const password = state.user.password

	// 是否为登录
	if (state.loginState === '登录') {
		// 登录
		const { data } = await reqUserLogin({ phone, password })
		if (!phone.length) {
			uni.showToast({
				title: data.msg,
				icon: 'none'
			})
		} else {
			if (data.code !== 200) {
				uni.showToast({
					title: '密码错误！！',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: '登录成功！！',
					icon: 'none'
				})
				getUserInfo.getInfo(data.data.Token, data.data.data2[0].uid)
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			}
		}
	} else {
		//注册
		const { data } = await reqUserRegister({ phone, password })
		if (data.code !== 200) {
			uni.showToast({
				title: data.msg,
				icon: 'none'
			})
		} else {
			uni.showToast({
				title: '注册成功，请登录',
				icon: 'none'
			})
			state.loginState = '登录'
		}
	}
}

// 复选框
const checkRadio = e => {
	state.checked = e.detail
}

// 修改登录注册状态
const modifyLoginState = () => {
	state.loginState2 = state.loginState === '注册' ? (state.loginState2 = '登录') : (state.loginState2 = '登录')
	state.loginState = state.loginState !== '注册' ? (state.loginState = '注册') : (state.loginState = '登录')
}

// 页面加载
onLoad(message => {})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { user, errorMessage, checked, loginState, loginShow, show, loginState2 } = toRefs(state)
</script>

<style lang="scss">
.login {
	.login-a {
		padding: 0 40rpx 60rpx 40rpx;
		.phone {
			width: 88%;
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-top: 40rpx;
			border: 1px solid #e3e3e3;
			border-radius: 60rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
			input {
				margin-left: 20rpx;
			}
		}
		.button {
			width: 95%;
			margin-top: 50rpx;
			.switch {
				font-size: 28rpx;
				margin-bottom: 10rpx;
				color: red;
				margin-left: 540rpx;
			}
		}
	}
	.force {
		padding: 0 40rpx;
		display: flex;
		font-size: 26rpx;
		color: #948c99;
		.van-checkbox__icon-wrap {
			margin-top: 6rpx;
		}
		view {
			width: 90%;
		}
		text {
			color: #c79881;
		}
	}
}
</style>
